<template>
	<div v-if="state.skusList.length > 0">
		<el-table :data="state.skusList" border style="width: 100%">
			<el-table-column
				show-overflow-tooltip
				v-for="(item, index) in goodsSpuSpecs"
				:key="index"
				:prop="item.id"
				:label="item.specsName ? item.specsName : '未选择'"
			>
				<template #default="scope">
					{{ scope.row.goodsSkuSpecsValues[index] ? scope.row.goodsSkuSpecsValues[index].specsValueName : '未选择' }}
				</template>
			</el-table-column>
			<el-table-column prop="salesPrice" label="售价">
				<template #default="scope">
					<el-input-number v-model="scope.row.salesPrice" style="width: 100%" :min="0" :precision="2" :controls="false" />
				</template>
			</el-table-column>
			<el-table-column prop="originalPrice" label="原价">
				<template #default="scope">
					<el-input-number v-model="scope.row.originalPrice" style="width: 100%" :min="0" :precision="2" :controls="false" />
				</template>
			</el-table-column>
			<el-table-column prop="costPrice" label="成本价">
				<template #default="scope">
					<el-input-number v-model="scope.row.costPrice" style="width: 100%" :min="0.0" :precision="2" :controls="false" />
				</template>
			</el-table-column>
			<el-table-column prop="stock" label="库存">
				<template #default="scope">
					<el-input-number v-model="scope.row.stock" style="width: 100%" :min="0" :precision="0" :controls="false" />
				</template>
			</el-table-column>
			<!-- <el-table-column prop="stock" label="一级分销比例">
						<template #default="scope">
							<el-input-number v-model="scope.row.firstRate" :min="0" :precision="0" :controls="false" />
						</template>
					</el-table-column>
					<el-table-column prop="stock" label="二级分销比例">
						<template #default="scope">
							<el-input-number v-model="scope.row.secondRate" :min="0" :precision="0" :controls="false" />
						</template>
					</el-table-column> -->
			<el-table-column prop="enable" label="是否启用" width="90px">
				<template #default="scope">
					<el-switch v-model="scope.row.enable" inline-prompt active-value="1" inactive-value="0" active-text="是" inactive-text="否"></el-switch>
				</template>
			</el-table-column>
		</el-table>
		<el-popover placement="right" :visible="state.batchPopover" :width="350" trigger="click">
			<div class="popover-input">
				<el-form ref="formRef" :model="state.form" label-width="120px">
					<el-form-item label="售价">
						<el-input-number v-model="state.form.salesPrice" :min="0" :precision="2" :controls="false" placeholder="请输入商品售价" />
					</el-form-item>
					<el-form-item label="原价">
						<el-input-number v-model="state.form.originalPrice" :min="0" :precision="2" :controls="false" placeholder="请输入商品原价" />
					</el-form-item>
					<el-form-item label="成本价">
						<el-input-number v-model="state.form.costPrice" :min="0" :precision="2" :controls="false" placeholder="请输入商品成本价" />
					</el-form-item>
					<el-form-item label="库存">
						<el-input-number v-model="state.form.stock" :min="0" :precision="0" :controls="false" placeholder="请输入商品库存" />
					</el-form-item>
					<!-- <el-form-item label="一级分销比例">
						<el-input-number v-model="form.firstRate" :min="0" :precision="0" :controls="false" placeholder="请输入一级分销比例" />
					</el-form-item>
					<el-form-item label="二级分销比例">
						<el-input-number v-model="form.secondRate" :min="0" :precision="0" :controls="false" placeholder="请输入二级分销比例" />
					</el-form-item> -->
					<el-form-item label-width="120px">
						<el-button @click="popoverClose">关闭</el-button>
						<el-button @click="batchAdd" type="primary">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
			<template #reference>
				<el-button link @click="state.batchPopover = true" v-if="state.skusList.length > 0" type="primary">批量设置</el-button>
			</template>
		</el-popover>
	</div>
</template>
<script lang="ts" setup>
import { arrEquals, descartes } from '/@/utils/util';
import { reactive, PropType, watch } from 'vue';
interface dataType {
	tableData: Array<any>;
	skusList: Array<any>;
	form: any;
	batchPopover: boolean;
}
const emit = defineEmits(['getGoodsSkus']);

const props = defineProps({
	skusData: {
		type: Array,
		default: () => [],
	},
	goodsSpuSpecs: {
		type: Array,
		default: () => [],
	},
});
const state = reactive<dataType>({
	tableData: [],
	skusList: [],
	form: {
		salesPrice: 0,
		originalPrice: 0,
		costPrice: 0,
		stock: 0,
		firstRate: 0,
		secondRate: 0,
	},
	batchPopover: false,
});
watch(
	() => props.goodsSpuSpecs,
	(val) => {
		let array: any = [];
		val.forEach(function (item: any) {
			if (item.goodsSkuSpecsValues && item.goodsSkuSpecsValues.length > 0) {
				array.push(item.goodsSkuSpecsValues);
			}
		});
		let skuList = descartes(array);
		skuList = skuList.map((item: any) => ({
			goodsSkuSpecsValues: Array.isArray(item) ? item : [item],
			ids: (Array.isArray(item) ? item : [item]).map((ites) => ites.specsValueId),
			id: undefined,
			salesPrice: 0,
			originalPrice: 0,
			costPrice: 0,
			stock: 0,
			enable: '1',
			firstRate: 0,
			secondRate: 0,
		}));

		let skuList2 = props.skusData.map((item: any) => ({
			...item,
			ids: item.goodsSkuSpecsValues.map((ites: any) => ites.specsValueId),
		}));
		skuList.forEach((item: any) => {
			skuList2.forEach((item2) => {
				if (arrEquals(item.ids, item2.ids)) {
					item.id = item2.id ? item2.id : '';
					item.salesPrice = item2.salesPrice ? item2.salesPrice : 0;
					item.originalPrice = item2.originalPrice ? item2.originalPrice : 0;
					item.costPrice = item2.costPrice ? item2.costPrice : 0;
					item.stock = item2.stock ? item2.stock : 0;
					item.enable = item2.enable ? item2.enable : '1';
					item.firstRate = item2.firstRate ? item2.firstRate : 0;
					item.secondRate = item2.secondRate ? item2.secondRate : 0;
				}
			});
		});
		state.skusList = skuList;
	},
	{ deep: true, immediate: true }
);
watch(
	() => state.skusList,
	(val) => {
		emit('getGoodsSkus', val);
	},
	{ deep: true }
);

const batchAdd = () => {
	state.skusList.forEach((item: any) => {
		if (state.form.salesPrice) {
			item.salesPrice = state.form.salesPrice;
		}
		if (state.form.originalPrice) {
			item.originalPrice = state.form.originalPrice;
		}
		if (state.form.costPrice) {
			item.costPrice = state.form.costPrice;
		}
		if (state.form.stock) {
			item.stock = state.form.stock;
		}
		if (state.form.firstRate) {
			item.firstRate = state.form.firstRate;
		}
		if (state.form.secondRate) {
			item.secondRate = state.form.secondRate;
		}
	});
	popoverClose();
};
const popoverClose = () => {
	state.batchPopover = false;
	state.form = { salesPrice: 0, originalPrice: 0, costPrice: 0, stock: 0, firstRate: 0, secondRate: 0 };
};
</script>
